<template>
	<view class="page">
		<z-paging ref="paging" class="scroll-view" v-model="users" @query="getUserToUserList" :use-page-scroll="true"
			:refresher-enabled="false" :auto="false" :auto-show-back-to-top="true" :loading-more-enabled="false">
			<view class="list-item" v-for="(item,index) in users" :key="index" @click="connect(item)">
				<view class="avatar">
					<!-- <text class="round" v-if="item.read"></text> -->
					<view class="unreadNum" v-if="item.unread_num">{{item.unread_num>99?'99+':item.unread_num}}</view>
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title">
						<text class="name">{{ item.nickname }}</text>
						<text class="time">{{$u.timeFormat(item.message_time , 'yyyy-mm-dd hh:MM:ss')}}</text>
					</view>
					<view class="txt">{{item.message}}</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				users: []
			};
		},
		onShow() {
			let that = this
			this.getUserToUserList()
			//每3秒重新获取一次消息
			this.chatInterVal = setInterval(function() {
				that.getUserToUserList()
			}, 3000)
		},
		onHide() {
			if (this.chatInterVal) {
				clearInterval(this.chatInterVal)
				this.chatInterVal = null
			}
		},
		destroyed() {
			if (this.chatInterVal) {
				clearInterval(this.chatInterVal)
				this.chatInterVal = null
			}
		},
		methods: {
			getUserToUserList(pageNo, pageSize) {
				this.$Api.chat.getUserToUserList({
					page_size: 999999
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			},
			connect(item) {
				uni.navigateTo({
					url: `/pages/message/privateMessageChat?name=${item.nickname}&user_id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 32rpx;
		color: #333;
	}

	.list-item {
		display: flex;
		padding: 30rpx 0;
		border-bottom: 1px solid #f7f8f9;

		.avatar {
			width: 90rpx;
			height: 90rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			position: relative;

			.unreadNum {
				position: absolute;
				top: -25rpx;
				right: -25rpx;
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 50%;
				background-color: red;
				color: #ffffff;
				font-size: 22rpx;
			}

			.round {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				background: #ef5656;
				top: -4rpx;
				right: -4rpx;
				z-index: 1;
			}

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.content {
			flex: 1;

			.title {
				display: flex;
				justify-content: space-between;

				.name {
					font-weight: bold;
				}

				.time {
					color: #999;
					font-size: 24rpx;
				}
			}

			.txt {
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				text-align: left;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>